<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>一些常见的细节</title>
</head>
<body>
<div></div>

<li>scrollWidth、clientWidth、offsetWidth的区别</li>
<li>当textarea没有输入内容时，scrollWidth和clientWidth值一样；</li>
<li>当textarea输入值并且出现横向滚动条时，scrollWidth发生改变，clientWidth不变；</li>
<li>两种情况下offsetWidth的值均未改变，并且大于clientWidth；</li>
<li>可见，scrollWidth是对象实际内容的宽度，clientWidth是对象可见内容的宽度（不含边线），offsetWidth也是对象可见内容的宽度（含边线）</li>
 
<textarea wrap="off" id="txt"></textarea>
<button onclick="javascript:compare();">有边线比较</button>
<button onclick="javascript:noCompare();">去掉边线比较</button>

<script type="text/javascript">

function compare() {
 	var txtarea = document.getElementById("txt");
 	txtarea.style.border = '1px solid gray';
 	alert("scrollWidth:" + txtarea.scrollWidth + "\nclientWidth:" + txtarea.clientWidth + "\noffsetWidth:" + txtarea.offsetWidth);
 }

function noCompare() {
	var txtarea = document.getElementById("txt");
	txtarea.style.border = 0;
	alert("scrollWidth:" + txtarea.scrollWidth + "\nclientWidth:" + txtarea.clientWidth + "\noffsetWidth:" + txtarea.offsetWidth);
}


</script>

</body>
</html>

